<div class="home_area_box">
    <div class="home_area">
        <div class="row margin_lr_0 margin_b_30">
            <div class="col-sm-8">
                <div class="map_data">
                    <div class="inner">
                        <amap [option]="option" (mapLoaded)="mapLoaded($event)"></amap>
                        <div class="sensor_data_box posi_a r_0 t_0">
                            <div class="sensor_data" (click)="openHistoryInfo(item.sensors)"
                                 [class.sensor_data_alarm]="IsAlarmStatus(item)"
                                 [class.sensor_data_abnormal]="IsAbnormalStatus(item)"
                                 *ngFor="let item of sensorPoints; let i = index">
                                <div class="status">
                                    <span class="number">
                                        <img src="/assets/img/blue_water.png">{{item.id}}</span>
                                    <span class="normal" [class.alarm]="IsAlarmStatus(item)"
                                          [class.abnormal]="IsAbnormalStatus(item)">{{getSensorStatusName(getStatusValueInPipeline(item))}}</span>
                                </div>
                                <div *ngFor="let sensor of item.sensors; let j = index">
                                    <div class="data inline_box" *ngIf="sensor.type!='CAMERA'">
                                        <img [src]="getSensorIcon(sensor)">
                                        <span>{{getSensorTypeName(sensor)}}:</span>
                                        <span *ngIf="sensor.currentValue">{{getSensorValueWithUnit(sensor)}}</span>
                                    </div>
                                </div>
                                <div class="data inline_box">
                                    <img [src]="getPipelineIcon(item)">
                                    <span>管道类型：</span>
                                    <span>{{getPipelineTypeName(item)}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="title"><span class="title_space">管道材质数据统计</span></div>-->
                    <div class="corner_box_inner">
                        <img class="corner1" src="/assets/img/j_1@2x.png">
                        <img class="corner2" src="/assets/img/j_2@2x.png">
                        <img class="corner3" src="/assets/img/j_3@2x.png">
                        <img class="corner4" src="/assets/img/j_4@2x.png">
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="alarm_list">
                    <div class="inner">
                        <div class="title"><span class="title_space">告警列表</span></div>
                        <div class="alarm_list_body" id="alarm_list_body">
                            <div class="alarm_list_body_scroll" id="alarm_list_body_scroll">
                                <div class="item flex_row_start" *ngFor="let item of alarmList; let i=index;">
                                    <div class="id">{{item.id}}:</div>
                                    <div class="content text_ellipsis">{{item.description}}</div>
                                    <div class="handle"><span class="table_btn_primary"
                                                              (click)="createAlarm(item)">立即处理</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="corner_box_inner">
                        <img class="corner1" src="/assets/img/j_1@2x.png">
                        <img class="corner2" src="/assets/img/j_2@2x.png">
                        <img class="corner3" src="/assets/img/j_3@2x.png">
                        <img class="corner4" src="/assets/img/j_4@2x.png">
                    </div>
                </div>
                <div class="alarm_data">
                    <div class="inner">
                        <div class="title"><span class="title_space">故障数据统计</span></div>
                        <div id="alarm_data_chart" class="inner_body"></div>
                    </div>
                    <div class="corner_box_inner">
                        <img class="corner1" src="/assets/img/j_1@2x.png">
                        <img class="corner2" src="/assets/img/j_2@2x.png">
                        <img class="corner3" src="/assets/img/j_3@2x.png">
                        <img class="corner4" src="/assets/img/j_4@2x.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="row margin_lr_0">
            <div class="col-sm-3">
                <div class="pipeline_material">
                    <div class="inner">
                        <div class="title"><span class="title_space">管道材质数据分析</span></div>
                        <div id="pipeline_material_chart" class="inner_body"></div>
                    </div>
                    <div class="corner_box_inner">
                        <img class="corner1" src="/assets/img/j_1@2x.png">
                        <img class="corner2" src="/assets/img/j_2@2x.png">
                        <img class="corner3" src="/assets/img/j_3@2x.png">
                        <img class="corner4" src="/assets/img/j_4@2x.png">
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="pipeline_diameter">
                    <div class="inner">
                        <div class="title"><span class="title_space">管道管径数据分析</span></div>
                        <div id="pipeline_diameter_chart" class="inner_body"></div>
                    </div>
                    <div class="corner_box_inner">
                        <img class="corner1" src="/assets/img/j_1@2x.png">
                        <img class="corner2" src="/assets/img/j_2@2x.png">
                        <img class="corner3" src="/assets/img/j_3@2x.png">
                        <img class="corner4" src="/assets/img/j_4@2x.png">
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="pipeline_type">
                    <div class="inner">
                        <div class="title"><span class="title_space">管道类别数据分析</span></div>
                        <div id="pipeline_type_chart" class="inner_body"></div>
                    </div>
                    <div class="corner_box_inner">
                        <img class="corner1" src="/assets/img/j_1@2x.png">
                        <img class="corner2" src="/assets/img/j_2@2x.png">
                        <img class="corner3" src="/assets/img/j_3@2x.png">
                        <img class="corner4" src="/assets/img/j_4@2x.png">
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="alarm_type">
                    <div class="inner">
                        <div class="title"><span class="title_space">故障类别统计</span></div>
                        <div id="alarm_type_chart" class="inner_body"></div>
                    </div>
                    <div class="corner_box_inner">
                        <img class="corner1" src="/assets/img/j_1@2x.png">
                        <img class="corner2" src="/assets/img/j_2@2x.png">
                        <img class="corner3" src="/assets/img/j_3@2x.png">
                        <img class="corner4" src="/assets/img/j_4@2x.png">
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="modal " *ngIf="showhistoryinfo" tabindex="-1" role="dialog" name="create_task"
     aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        (click)="closeHistoryInfo()"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">历史数据</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6" *ngIf="showLiquidLevel">
                        <div class="history_box">
                            <div class="inner">
                                <div class="title"><span class="title_space">液位历史数据</span></div>
                                <div id="liquid_level_history" class="inner_body"></div>
                            </div>
                            <div class="corner_box_inner">
                                <img class="corner1" src="/assets/img/j_1@2x.png">
                                <img class="corner2" src="/assets/img/j_2@2x.png">
                                <img class="corner3" src="/assets/img/j_3@2x.png">
                                <img class="corner4" src="/assets/img/j_4@2x.png">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6" *ngIf="showFlowSpeed">
                        <div class="history_box">
                            <div class="inner">
                                <div class="title"><span class="title_space">流速历史数据</span></div>
                                <div id="flow_speed_history" class="inner_body"></div>
                            </div>
                            <div class="corner_box_inner">
                                <img class="corner1" src="/assets/img/j_1@2x.png">
                                <img class="corner2" src="/assets/img/j_2@2x.png">
                                <img class="corner3" src="/assets/img/j_3@2x.png">
                                <img class="corner4" src="/assets/img/j_4@2x.png">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6" *ngIf="showCamear">
                        <div class="history_box">
                            <div class="inner">
                                <div class="full" id="videoPlay"></div>
                            </div>
                            <div class="corner_box_inner">
                                <img class="corner1" src="/assets/img/j_1@2x.png">
                                <img class="corner2" src="/assets/img/j_2@2x.png">
                                <img class="corner3" src="/assets/img/j_3@2x.png">
                                <img class="corner4" src="/assets/img/j_4@2x.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="model_btn" data-dismiss="modal" (click)="closeHistoryInfo()">关闭</button>
            </div>
        </div>
    </div>
</div>
<workorder-create [alarm]="alarm"
                  [showModel]="showCreateWorkOrder"
                  (close)="showCreateWorkOrder=false"
                  (created)="getAlarmList()"></workorder-create>
